import cn from 'classnames';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import {
	Maximize20 as ShowIcon,
	Minimize20 as HiddenIcon,
} from '@carbon/icons-react';
import s from './style.module.css';

function Collapse({ className, children, title, desc }) {
	const [iscollapse, setCollapse] = useState(true);

	return (
		<div className={cn(className, s.collapse)}>
			<div className={cn(s.header, { [s.highLight]: !iscollapse })}>
				<div className={cn(s.title, { [s.highLight]: !iscollapse })}>
					{title}
				</div>
				<div className={s.desc}>{desc}</div>
				<span
					className={s.icon}
					onClick={() => setCollapse(!iscollapse)}
				>
					{iscollapse ? <ShowIcon /> : <HiddenIcon />}
				</span>
			</div>
			<div className={cn(s.panel, { [s.hidden]: iscollapse })}>
				{children}
			</div>
		</div>
	);
}

Collapse.propTypes = {
	className: PropTypes.string,
	title: PropTypes.string.isRequired,
	desc: PropTypes.string.isRequired,
	children: PropTypes.node.isRequired,
};
Collapse.defaultProps = {
	className: '',
};

export default Collapse;
